<template>
  <header class="cms_header">
    <h1 class="header_title">后台管理模板</h1>
    <div class="header_right_group">
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link avatar-group">
          <el-avatar size="medium"
                     src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
          <p>{{ userInfo.name }}</p>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="{type: 'loginOut'}">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default {
  name: 'LayoutHeader',
  data () {
    return {}
  },
  computed:{
    userInfo(){
      return this.common.getStorage('info')
    }
  },
  methods: {
    handleCommand (command) {
      const { type } = command
      if (type === 'loginOut') {
        this.common.removeStorage('info')
        this.common.removeStorage('token')
        this.common.removeCookie("token")
        this.$message({
          type: 'warning',
          message: '退出成功！请重新登录'
        })
        this.$router.push({ name: 'Login' })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.cms_header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  .header_title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 100%;
    padding-right: 20px;
    background-color: #001529;
    border-bottom: 1px solid #f2f2f2;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    box-sizing: border-box;
  }

  .header_right_group {
    flex: auto;
    height: 60px;
    background-color: #001529;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    color: #fff;

    .avatar-group {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      p {
        padding-left: 10px;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
